<ui:composition template="../template/plantilla_01.xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui"
        xmlns:c="http://java.sun.com/jsp/jstl/core"
        xmlns:fn="http://java.sun.com/jsp/jstl/functions" >

    <f:metadata>
        <f:viewParam name="productoBuscar" value="#{catalogoBean.productId}"/>
        <!--
        <f:viewParam name="tipo"    value="#{catalogoBean.pTipo}"/>
        <f:viewParam name="subtipo" value="#{catalogoBean.pSubtipo}"/>
        <f:viewParam name="marca"   value="#{catalogoBean.pMarca}"/>
        -->
        <f:event type="preRenderView" listener="#{catalogoBean.cargarCatalogo}" />
        
    </f:metadata>

    <ui:define name="head">
          
        <h:outputStylesheet library="css" name="catalogo.css"/>
        <h:outputStylesheet library="css" name="principalPool.css" rendered="#{fn:length(poolAplicacionBean.pooles)>0}"/>
        <h:outputStylesheet library="css" name="jquery.countdown.css" rendered="#{fn:length(poolAplicacionBean.pooles)>0}"/>
        <h:outputStylesheet library="css" name="js-image-slider.css" rendered="#{(aplicacionBean.parametro.muestraBannerEnCatalogo == 'S') and (usuarioSessionBean.estaRegistrado)}"/>

        <script type="text/javascript"  language="javascript" src="#{request.contextPath}/resources/js/jsCarousel-2.0.0.js" />
        <h:outputStylesheet library="css" name="jsCarousel-2.0.0.css"/>
        
        <!-- Auto refresh del catálogo por única vez -->
        <!--
        <script> 
        window.onload = function() 
        { 
        if (!window.location.search) 
           { 
             setTimeout("window.location+='?refreshed';", .1000); 
            } 
        } 
        </script>
        -->
<!--
        <script type="text/javascript"  language="javascript" src="#{request.contextPath}/resources/js/jquery.countdown.js" />
        <script type="text/javascript"  language="javascript" src="#{request.contextPath}/resources/js/jquery.countdown-es.js" />
-->
    </ui:define>


    <ui:define name ="panelCentral" >

        <h:form prependId="false">
            <h:panelGroup layout="block" styleClass="separadorBanner" rendered="#{not usuarioSessionBean.estaRegistrado}"></h:panelGroup>
            <div class="contPool"> 
                <ui:include src="../pool/bannerPool.xhtml" />   
            </div>
        </h:form>
        
        <h:form id="formulario" prependId="false" target="_blank"  >
            
            <!-- SELECCION TIPO DE PRODUCTOS CON IMÁGENES -->
            <h:panelGroup layout="block" rendered="#{catalogoBean.muestraPrincipal}" style="width:100%; text-align:center; margin-top:10px; " >
            
                <div class="filtrosHome">
                   <ui:include src="../inventario/filtrosAdicionalesHome.xhtml" /> 
                </div> 
                          
                <!-- 
                <div id="carruselFoco">
                    <div class="tipoFiltros">
                        PRODUCTOS EN FOCO <span>- DESCUENTOS DE LA SEMANA</span>
                   </div>
                <p:carousel  value="#{catalogoBean.itemCatalogo.producto.sustitutos}" var="s" numVisible="5" >
       
                 <div class="carrCont">
        
                <div class="carrFoto">
                <p:graphicImage style="width:120px; height:120px;"  value="#{aplicacionBean.parametro.pathImagenesProductos}#{s.productoSustituto.imgchi}.jpg" />
                 </div>

                 <div class="carrCod">
                  <h:outputText value="#{s.productoSustituto.codigo}" />
                  <br/>
                    <h:outputText value="(#{s.productoSustituto.nroParte})" rendered="#{not empty s.productoSustituto.nroParte}"  />
                 </div>

                 <div class="carrDesc">
                 <h:outputText value="#{s.productoSustituto.descrp}" />
                 </div>

                </div>

                </p:carousel>  
                </div> -->
           
            <!--    
            <div class="tipoFiltros">MARCAS</div>           
            <p:carousel id="tblMarcas" value="#{catalogoBean.marcas}" var="m" numVisible="5" >
                <div class="carrCont">  
                    <p:commandLink action="#{catalogoBean.verProductosFromCatalogoHome(null,m)}" process="@this" >                    
                        <div class="carrFoto">
                            <p:graphicImage style="width:120px; height:70px;"
                            value="#{aplicacionBean.parametro.pathImagenesDefault}/#{m}.jpg" />
                        </div>

                        <div class="carrDesc">
                            <h:outputText value="#{m}" />
                        </div>
                    </p:commandLink>    
                </div>
            </p:carousel>  
            -->
             
                
            <div class="tipoFiltros">TIPOS DE PRODUCTOS</div>
            <ul class="k-effect circle" value="#{catalogoBean.tipoProducto}"  >                
                    <ui:repeat value="#{catalogoBean.tiposProductos}" var="t">                     
                        <li class="ui-grid-col-44" >
                            <p:commandLink action="#{catalogoBean.verProductosFromCatalogoHome(t,null)}" process="@this" >
                                <p:graphicImage value="#{aplicacionBean.parametro.pathImagenesDefault}/tipoProductos/_#{t}.jpg" />
                                <span class="mask"></span>
                                <div class="descTipo"><h:outputText value="#{t}" /></div>
                            </p:commandLink> 
                        </li>
                    </ui:repeat>        
                </ul>
               
            </h:panelGroup>
            
            <h:panelGroup id="tFiltros" layout="block" styleClass="panelIzquierdo" rendered="#{not catalogoBean.muestraPrincipal}" >
                
                <h:panelGroup layout="block" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"
                     style="height: 20px; vertical-align: middle; width:150px;"  
                     rendered="#{not empty catalogoBean.marca or not empty catalogoBean.tipoProducto or not empty catalogoBean.subTipo}"  >                 
                    <div class="tipoFiltros">Filtros aplicados</div>                        
                    
                </h:panelGroup>
                
                <div class="filtrosAplicados">
                    <div style="text-align: left; width: 100%; clear: both;">
                        <div class="descFiltro" >
                            <h:outputText  value="#{catalogoBean.tipoProducto}"
                                          rendered="#{not empty catalogoBean.tipoProducto}" />
                        </div>
                        <p:commandButton styleClass="quitarFiltro" icon="delete4"  
                                         action="#{catalogoBean.verProductosByRubro(true)}"
                                         process="@this"
                                         update="formulario:divDetalle, :formulario:tFiltros ,:formulario:divCantidadProductos"
                                         rendered="#{not empty catalogoBean.tipoProducto}" >
                            <f:setPropertyActionListener value="#{null}" target="#{catalogoBean.tipoProducto}" />
                        </p:commandButton>
                    </div> 
                    
                    <div style="text-align: left; width: 100%; clear: both;">
                        <div class="descFiltro">
                        <h:outputText value="#{catalogoBean.marca}" rendered="#{not empty catalogoBean.marca}" />
                        </div>
                        <p:commandButton styleClass="quitarFiltro"  icon="delete4" 
                                         action="#{catalogoBean.verProductosByRubro(true)}"                                         
                                         process="@this"
                                         update="formulario:divDetalle, :formulario:tFiltros, :formulario:divCantidadProductos" 
                                         rendered="#{not empty catalogoBean.marca}" >
                            <f:setPropertyActionListener value="#{null}" target="#{catalogoBean.marca}" />
                        </p:commandButton>                        
                    </div>
                    
                    <div style="text-align: left; width: 100%; clear: both;">
                        <div class="descFiltro">
                        <h:outputText value="#{catalogoBean.subTipo}" rendered="#{not empty catalogoBean.subTipo}" />
                        </div>
                        <p:commandButton styleClass="quitarFiltro"  icon="delete4" 
                                         action="#{catalogoBean.verProductosByRubro(true)}"                                                                                  
                                         process="@this"
                                         update="formulario:divDetalle, :formulario:tFiltros, :formulario:divCantidadProductos"
                                         rendered="#{not empty catalogoBean.subTipo}" >
                            <f:setPropertyActionListener value="#{null}" target="#{catalogoBean.subTipo}" />
                        </p:commandButton>                        
                    </div>
                </div>                   
                
                <h:panelGroup 
                              styleClass="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"
                              style="height: 20px; vertical-align: middle; width:150px;"
                              rendered="#{empty catalogoBean.marca}" >                    
                    <div class="tipoFiltros">Marca</div>               
                </h:panelGroup>
                
                <p:selectOneListbox  id="marca" value="#{catalogoBean.marca}" 
                                    style="width: 150px; max-height: 200px; overflow-y:auto; float:left;" 
                                    filter="true"                                        
                                    rendered="#{empty catalogoBean.marca}" >
                    <f:selectItems value="#{catalogoBean.marcas}" var="t" itemLabel="#{t}" itemValue="#{t}"/>
                    <p:ajax listener="#{catalogoBean.verProductosByRubro(false)}" process="@this,subtipo" 
                            update="formulario:divDetalle, :formulario:tFiltros, :formulario:divCantidadProductos, :formulario:divFiltrosAdicionales" />
                </p:selectOneListbox>
                
                <p:spacer width="150" height="5" />           
                
                <h:panelGroup 
                     class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"
                     style="height: 20px; vertical-align: middle; width:150px;" 
                     rendered="#{not empty catalogoBean.tiposProductos and empty catalogoBean.tipoProducto}"  >

                    <div class="tipoFiltros">Tipos de producto</div>                        
                </h:panelGroup>                                  
                <p:selectOneListbox  id="tipoProducto" value="#{catalogoBean.tipoProducto}" 
                                    style="width: 150px; max-height:200px; overflow-y:auto; float:left;"                                        
                                    rendered="#{empty catalogoBean.tipoProducto}"
                                    filter="true" >
                    <f:selectItems value="#{catalogoBean.tiposProductos}" var="t" itemLabel="#{t}" itemValue="#{t}"/>
                    <p:ajax listener="#{catalogoBean.verProductosByRubro(false)}" process="@this,subtipo, marca"                             
                            update=":formulario:divDetalle , :formulario:tFiltros,:formulario:divCantidadProductos, :formulario:divFiltrosAdicionales " />
                </p:selectOneListbox>
                
                <p:spacer width="150" height="5" />   
                
                <h:panelGroup
                     class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"
                     style="height: 20px; vertical-align: middle; width:150px;"
                     rendered="#{empty catalogoBean.subTipo}" >
                    <div class="tipoFiltros">Subtipos</div>                        
                </h:panelGroup>  
                <p:selectOneListbox id="subtipo" value="#{catalogoBean.subTipo}"  required="false" 
                                    style="width:150px; max-height:200px; overflow-y:auto;" 
                                    rendered="#{empty catalogoBean.subTipo}" filter="true" >                    
                    <f:selectItems value="#{catalogoBean.subTipos}" var="i" itemLabel="#{i}" itemValue="#{i}"  />
                    <p:ajax listener="#{catalogoBean.verProductosByRubro(false)}" process="@this" 
                            update="formulario:divDetalle, :formulario:tFiltros, :formulario:divCantidadProductos, :formulario:divFiltrosAdicionales"  />
                </p:selectOneListbox>
                
                <p:spacer width="150" height="5" />                 
                
            </h:panelGroup>
            
            <h:panelGroup layout="block" styleClass="panelDerecho" rendered="#{not catalogoBean.muestraPrincipal}" >
                
                <ui:include src="../inventario/filtrosAdicionales.xhtml" /> 
                <h:form id="bannerCatalogo" rendered="#{(aplicacionBean.parametro.muestraBannerEnCatalogo == 'S') and (usuarioSessionBean.estaRegistrado)}" >
                <ui:include src="banner.xhtml" />
                </h:form>

                <!-- BUSCADOR -->
                <p:growl showDetail="true" id="gCatalogo"  />
                
                <ui:include src="barraBusqueda.xhtml" />   

                <ui:include src="../inventario/catalogoDetalle.xhtml" />              
            </h:panelGroup>
            
            <ui:include src="bannersVerticales.xhtml" />

        </h:form>

        <p:dialog header="Actualización " widgetVar="dlg2" modal="true" 
                  height="200" width="50%" closable="false"
                  visible="#{usuarioSessionBean.usuario.actualizaCatalogo eq 'S'}" >
            <p>
                <h2>Estimado</h2>
                
                Hemos realizados cambios importantes en nuestra plataforma virtual, lo cual requiere de una actualización de la página.
                Haga clic en el botón "Actualizar" para ver los cambios. Muchas gracias                
                
            </p>
            
            <div style="width: 100%; text-align: center; padding: 3px;">
                <p:commandButton icon="conversor16" value="Actualizar" oncomplete="location.reload(true);" 
                                 actionListener="#{usuarioSessionBean.marcarCatalogoActualizado}">                    
                </p:commandButton>
            </div>
            
        </p:dialog>   
        
    </ui:define>

</ui:composition>
